.builder-wrapper {
  height: 100vh;
  overflow: hidden;
  .sidebar-drawer {
    width: 60px;
    visibility: visible !important;
    transform: none !important;
    display: block;
    ::ng-deep {
      > .mat-drawer-inner-container {
        overflow: hidden;
      }
    }
    &.mat-drawer-opened {
      width: 200px;
    }
  }
  .drawer-content {
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: transform, padding-left;
    &:not(.opened) {
      padding-left: 60px;
    }
    &.opened {
      padding-left: 0;
    }
  }
}

.mat-drawer {
  &.json-setting {
    ::ng-deep {
      .ace_editor {
        min-height: 85vh;
      }
    }
  }
}

.actions {
  &.expand {
    position: absolute;
    left: 0;
    top: 35px;
    width: 48px;
    height: 48px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
  }
}
.mat-drawer-opened {
  .actions {
    &.expand {
      left: -48px;
    }
  }
}
